<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习页面</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/category.css"/>

</head>
<body>
<div id="wrap">
    <div class="topArea" v-show="noPlay">
        <img class="topAreaImg" :src="cover_url" alt="">
        <img class="videoPlayBtn" v-if="isPlayBtn" @click="isPlayFun" src="./img/play@2x.png" alt="">

    </div>
    <div class="videoArea" v-show="isPlay">
        <video class="videoTag" :src="video_url" controls="controls" controlsList="nodownload">
        </video>
    </div>
    <h3 class="tpo_name">{{tpo_name}}</h3>
    <div class="btnArea">
        <ul>
            <li @click="preFun(scenarioId)">
                <img class="btnBGimg" src="./img/category/clickBG2x.png" v-show="preClickBG" alt="">
                <img class="btnBGimg" src="./img/category/noclickBG@2x.png" v-show="nopreClickBG" alt="">
                <img class="btnLogo" src="./img/category/doPreviewLogoY@2x.png" v-show="preLogoY" alt="">
                <img class="btnLogo" src="./img/category/doPreviewClick@2x.png" v-show="preLogo" alt="">
                <p class="btnName" :class="{white:isPreFun}">做预习</p>
            </li>
            <li @click="exerFun(scenarioId)">
                <img class="btnBGimg" src="./img/category/clickBG2x.png" v-show="exerClickBG" alt="">
                <img class="btnBGimg" src="./img/category/noclickBG@2x.png" v-show="noexerClickBG" alt="">
                <img class="btnLogo" src="./img/category/doExercise@2x.png" v-show="exerLogo" alt="">
                <img class="btnLogo" src="./img/category/doExerciseLogoN@2x.png" v-show="exerLogoN" alt="">
                <img class="btnLogo" src="./img/category/doExerciseLogoY@2x.png" v-show="exerLogoY" alt="">
                <p class="btnName" :class="{white:isExerFun}">做练习</p>
            </li>
            <li @click="reviewFun(scenarioId)">
                <img class="btnBGimg" src="./img/category/clickBG2x.png" v-show="revClickBG" alt="">
                <img class="btnBGimg" src="./img/category/noclickBG@2x.png" v-show="norevClickBG" alt="">
                <img class="btnLogo" src="./img/category/reviewClick@2x.png" v-show="
revLogo" alt="">
                <img class="btnLogo" src="./img/category/reviewLogoN@2x.png" v-show="revLogoN" alt="">
                <img class="btnLogo" src="./img/category/reviewLogoY@2x.png" v-show="revLogoY" alt="">
                <p class="btnName" :class="{white:isReviewFun}">内容回顾</p>
            </li>
        </ul>
    </div>
    <div class="resultArea">
        <h6>学习成果</h6>
        <ul class="resultUl">
            <li>
                <img class="resultImg" src="./img/category/synthesize@2x.png" alt="">
                <div class="resultDatas">
                    <span class="resultTitle">综合评分</span>
                    <div class="starArea">
                        <img src="./img/category/star_sY@2x.png" v-show="score >=1" alt="">
                        <img src="./img/category/star_sY@2x.png" v-show="score >=2" alt="">
                        <img src="./img/category/star_sY@2x.png" v-show="score >=3" alt="">
                        <img src="./img/category/star_sN@2x.png" v-show="score <1" alt="">
                        <img src="./img/category/star_sN@2x.png" v-show="score <2" alt="">
                        <img src="./img/category/star_sN@2x.png" v-show="score <3" alt="">
                    </div>
                </div>

            </li>
            <li>
                <img class="resultImg" src="./img/category/clock@2x.png" alt="">
                <div class="resultDatas">
                    <span class="resultTitle">练习用时</span>
                    <br><span class="resultNum">{{min}}'{{sec}}"</span>
                </div>
            </li>
            <li>
                <img class="resultImg" src="./img/category/text@2x.png" alt="">
                <div class="resultDatas">
                    <span class="resultTitle">正确题数</span>
                    <br><span class="resultNum">{{question_number_done_correct}}/{{question_number}}</span><span
                        class="resultUnit">题</span>
                </div>
            </li>
            <li>
                <img class="resultImg" src="./img/category/word@2x.png" alt="">
                <div class="resultDatas">
                    <span class="resultTitle">学习词汇</span>
                    <br><span class="resultNum">{{vocabulary_number}}</span><span class="resultUnit">个</span>
                </div>
            </li>

        </ul>
    </div>
    <div class="guide" v-if="guideShow">
        <img class="previewGuide" v-show="previewGuideShow" @click="isShowPreviewGuide()" src="./img/previewGuide1@3x.png" alt="">
        <img class="doExerciseGuide" v-show="doExerciseGuideShow" @click="isShowExerciseGuide()" src="./img/doExerciseGuide2@3x.png" alt="">
        <img class="reviewGuide" v-show="reviewGuideShow" @click="isShowReviewGuide()" src="./img/reviewGuide3@3x.png" alt="">
    </div>
</div>
</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var url = location.search;
    //    var URL = 'http://192.168.15.42:8821';
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
        }
        console.log(theRequest); //此时的theRequest就是我们需要的参数；
    }
    ;
    var vm = new Vue({
        el: '#wrap',
        data: {
            scenarioId: theRequest.id,
            name_cn: '',
            name_en: '',
            video_url: '',
            cover_url: '',
            isPlay: false,
            noPlay: true,
            isPlayBtn: false,
            tpo_name: '',
            duration: '',
            min: '',
            sec: '',
            question_number: '',
            question_number_done: '',
            question_number_done_correct: '',
            question_number_done_error: '',
            vocabulary_number: '',
            score: '',
            button1_status: '',
            button2_status: '',
            button3_status: '',
            preClickBG: true,
            nopreClickBG: false,
            preLogoY: false,
            preLogo: true,
            guideShow: false,
            guideNum:0,
            previewGuideShow: true,
            doExerciseGuideShow: false,
            reviewGuideShow: false,

            exerClickBG: false,
            noexerClickBG: true,
            exerLogo: false,
            exerLogoY: false,
            exerLogoN: false,


            revClickBG: false,
            norevClickBG: true,
            revLogo: false,
            revLogoY: false,
            revLogoN: false,

            isPreFun: true,
            isExerFun: false,
            isReviewFun: false,


        },
        created: function () {
            this.searchGuideFn('article-index-button1');
            this.searchGuideFn('article-index-button2');
            this.searchGuideFn('article-index-button3');
        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/exercise/categories/scenario/detail/' + theRequest.id, {}).then(function (res) {
                        console.log(res.data)
                        if (res.data.status == 200) {
                            this.name_cn = res.data.data.name_cn,
                                this.name_en = res.data.data.name_en,
                                this.tpo_name = res.data.data.tpo_name,
                                this.cover_url = res.data.data.cover_url,
                                this.video_url = res.data.data.video_url,

                                this.question_number = res.data.data.question_number,
                                this.question_number_done = res.data.data.question_number_done,
                                this.question_number_done_correct = res.data.data.question_number_done_correct,
                                this.question_number_done_error = res.data.data.question_number_done_error,
                                this.vocabulary_number = res.data.data.vocabulary_number,
                                this.score = res.data.data.score
                            this.min = Math.floor(res.data.data.duration / 60);
                            this.sec = Math.floor(res.data.data.duration % 60);
                            this.button1_status = res.data.data.button1_status;
                            this.button2_status = res.data.data.button2_status;
                            this.button3_status = res.data.data.button3_status;
                            if (this.video_url == null || this.video_url == '') {
                                this.isPlayBtn = false;
                            }
                            if (this.button2_status == 0 || this.button2_status == null) {
                                this.exerLogoN = true;
                                this.exerLogoY = false;
                            } else {
                                this.exerLogoN = false;
                                this.exerLogoY = true;
                            }

                            if (this.button3_status == 0 || this.button3_status == null) {
                                this.revLogoN = true;
                                this.revLogoY = false;
                            } else {
                                this.revLogoN = false;
                                this.revLogoY = true;
                            }
                        }
                        if (res.data.status == 400) {
                            alert(res.data.message)
                        }
                        if (res.data.status == 500) {
                            alert(res.data.message)
                        }


                    }, function (res) {

                    }
                )

            },
            //视频播放
            isPlayFun: function () {
                this.isPlay = true;
                this.noPlay = false;
            },

            //做预习
            preFun: function (data) {
                this.preClickBG = true;
                this.nopreClickBG = false;
                this.preLogoY = false;
                this.preLogo = true;

                this.exerClickBG = false;
                this.noexerClickBG = true;
                this.exerLogo = false;
                if (this.button2_status == 0 || this.button2_status == null) {
                    this.exerLogoN = true;
                    this.exerLogoY = false;
                } else if (this.button2_status == 1) {
                    this.exerLogoY = true;
                    this.exerLogoN = false;
                }


                this.revClickBG = false;
                this.norevClickBG = true;
                this.revLogo = false;
                if (this.button3_status == 0 || this.button3_status == null) {
                    this.revLogoN = true;
                    this.revLogoY = false;
                } else if (this.button3_status == 1) {
                    this.revLogoN = false;
                    this.revLogoY = true;
                }

                this.isPreFun = true;
                this.isExerFun = false;
                this.isReviewFun = false;

                window.location.href = 'pre-learn.html?id=' + data;
            },
            //做练习
            exerFun: function (data) {
                this.preClickBG = false;
                this.nopreClickBG = true;
                this.preLogoY = true;
                this.preLogo = false;

                this.exerClickBG = true;
                this.noexerClickBG = false;
                this.exerLogo = true;
                this.exerLogoN = false;
                this.exerLogoY = false;

                if (this.button2_status == 0 || this.button2_status == null) {
                    this.$http.post(URL + '/tpo/exercise/categories/scenario/details/clickButton/' + theRequest.id + '/' + 2, {}).then(function (res) {
                        console.log(res.data.message)
                    }, function (res) {

                    })
                }

                if (this.button3_status == 0 || this.button3_status == null) {
                    this.revLogoN = true;
                    this.revLogoY = false;

                } else if (this.button3_status == 1) {
                    this.revLogoN = false;
                    this.revLogoY = true;
                }

                this.revClickBG = false;
                this.norevClickBG = true;
                this.revLogo = false;

                this.isPreFun = false;
                this.isExerFun = true;
                this.isReviewFun = false;

                window.location.href = 'do_exercise.html?id=' + data;

            },
            //回顾内容
            reviewFun: function (data) {
                this.preClickBG = false;
                this.nopreClickBG = true;
                this.preLogoY = true;
                this.preLogo = false;

                this.exerClickBG = false;
                this.noexerClickBG = true;
                this.exerLogo = false;

                this.revClickBG = true;
                this.norevClickBG = false;
                this.revLogo = true;
                this.revLogoY = false;
                this.revLogoN = false;

                this.isReviewFun = true;
                this.isPreFun = false;
                this.isExerFun = false;
                if (this.button2_status == 0 || this.button2_status == null) {
                    this.exerLogoN = true;
                    this.exerLogoY = false;
                } else {
                    this.exerLogoY = true;
                    this.exerLogoN = false;
                }
                if (this.button3_status == 0 || this.button3_status == null) {
                    this.$http.post(URL + '/tpo/exercise/categories/scenario/details/clickButton/' + theRequest.id + '/' + 3, {}).then(function (res) {
                        console.log(res.data.message)

                    }, function (res) {

                    })
                }

                window.location.href = 'review-content.html?id=' + data;
            },
            //新手引导数据查询
            searchGuideFn:function (data) {
                this.$http.post(URL + '/tpo/operation-guide/search/'+data, {}).then(function (res) {
//                    console.log(res.data.data+data);
                    if (res.data.data == 0) {
                        this.guideNum++;
                        if(this.guideNum<3){
                            this.guideShow = true;
                        }

                    }
                }, function (res) {

                })
            },
            //新手引导后台传值
            saveGuideFn:function (data) {
                this.$http.post(URL + '/tpo/operation-guide/save/'+data, {
                    'article-index':data,
                }).then(function (res) {}, function (res) {})
            },
            isShowPreviewGuide: function () {
                this.previewGuideShow = false;
                this.doExerciseGuideShow = true;
                this.reviewGuideShow = false;
                this.saveGuideFn('article-index-button1')
            },
            isShowExerciseGuide: function () {
                this.previewGuideShow = false;
                this.doExerciseGuideShow = false;
                this.reviewGuideShow = true;
                this.saveGuideFn('article-index-button2')
            },
            isShowReviewGuide: function () {
                this.guideShow=false;
                this.saveGuideFn('article-index-button3')

            }


        }
    })
    vm.HttpDataFun()
    //处理页面返回
//    $(function () {
//        pushHistory();
//        window.addEventListener("popstate", function (e) {  //回调函数中实现需要的功能
//             alert("我监听到了浏览器的返回按钮事件啦123");
////            window.history.go(-3);
//            location.href = "type.html?id="+theRequest.id;  //在这里指定其返回的地址
//        }, false);
//
//        function pushHistory() {
//            var state = {
//                title: "分类详情",
//                url: "type.html?id="+theRequest.id
//            };
////        window.history.go(-3);
//            window.history.pushState(state, state.title, state.url);
//        }
//    })

</script>